<template>
  <div>
    <h2>测试元素的可见性</h2>
    <div class="content"></div>
    <h3 ref="target">🐹</h3>
  </div>
</template>

<script>
// 导入辅助函数
import { ref } from 'vue'
// 导入 vueuse的api
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup () {
    // 获取dom
    const target = ref(null)

    // 判断元素的可见性
    // stop 停止监听 显示状态改变 再也触发不了 回调函数
    const { stop } = useIntersectionObserver(
      // target 观察的元素
      target,
      ([{ isIntersecting }], observerElement) => {
        // 默认执行一次
        // 显示状态切换时执行
        // isIntersecting 布尔值 显示状态  true:可见 false:不可见
        console.log('isIntersecting:', isIntersecting)
        console.log('stop:', stop)
        if (isIntersecting === true) {
          // stop()
        }
      }
    )
    return {
      target
    }
  }
}
</script>

<style>
.content {
  height: 1000px;
}
</style>
